<template>
  <div style="padding: 10px;">
    <el-row>
      <el-col :span="22">
        <el-form inline :model="form_data" ref="searchForm">
          <el-form-item label="装柜日期" prop="loadingTime">
            <el-date-picker
              v-model="loadingTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="number">
            <el-input placeholder="搜索柜号/合同号" v-model="form_data.number"></el-input>
          </el-form-item>
          <el-form-item prop="customsClearanceCompanyId">
            <el-select filterable  filterable placeholder="清关公司" v-model="form_data.customsClearanceCompanyId">
              <el-option v-for="item in order_list" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="productNames">
            <el-select filterable  filterable placeholder="产品" v-model="form_data.productNames">
              <el-option v-for="item in product_list" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData" size="mini" type="primary">搜索</el-button>
            <el-button @click="resetData" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <div style="text-align: right;">
          <el-button type="primary" size="mini" @click="exportsData" >导出</el-button>
        </div>
      </el-col>
      <el-col>
        <el-table :data="table_data"  :height="table_height" >
          <el-table-column label="清关公司" prop="customsClearanceCompanyName" ></el-table-column>
          <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
          <el-table-column label="柜号" prop="containerNumber" ></el-table-column>
          <el-table-column label="产品" prop="productNames" ></el-table-column>
          <el-table-column label="付汇金额(元)" prop="paymentPrice" ></el-table-column>
          <el-table-column label="清关费(元)" prop="feeCost" ></el-table-column>
        </el-table>
        <pagination
          v-show="list_total>0"
          :total="list_total"
          :page.sync="list_params.pageNum"
          :limit.sync="list_params.pageSize"
          @pagination="getData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  customsClearanceCompanyCurrentAccountDetail, customsClearanceCompanyCurrentAccountDetailExport,
} from '@/api/report/report'
import {list as ownerList} from "@/api/base/owner";
import { list as capitalList } from "@/api/base/capital";
import { list as orderList } from "@/api/base/clearance"
import { AllList, list as productList } from '@/api/product/info'
import { list as domesticList } from "@/api/logistics/domestic"
export default {
  name: "settlement_fruit",
  dicts:['order_product_type','logistics_type'],
  data(){
    return {
      table_height:window.innerHeight - 300,
      list_params: {
        pageNum: 1,
        pageSize: 10,
        customer:'',
        subjectName:'',
      },
      list_total:0,
      loadingTime:'',
      table_data:[],
      form_data:{
        type:'',
        number:'',
        productId:'',
        materialFlowType:'',
        cargoOwnerId:'',
        customsClearanceCompanyId:''
      },
      product_list:[],
      owner_list:[],
      domestic_list:[],
      order_list:[]
    }
  },
  created(){
    this.getProductList()
    this.getOwnerList()
    this.getDomesticList()
    this.getOrderList()
  },
  watch:{
    loadingTime(val){
      this.getData()
    }
  },
  methods:{
    getOrderList(){
      orderList({is_page:0}).then(res=>{
        this.order_list = res.rows
      })
    },
    getDomesticList(){
      domesticList({is_page:0}).then(res=>{
        this.domestic_list = res.rows
      })
    },
    getOwnerList(){
      ownerList({is_page:0}).then(res=>{
        this.owner_list = res.rows
      })
    },
    getProductList(){
      AllList({is_page:0}).then(res=>{
        this.product_list = res.rows
      })
    },
    resetData(){
      this.loadingTime = []
      this.$refs.searchForm.resetFields()
      this.getData()
    },
    getData() {
      console.log(this.loadingTime)
      this.form_data = {
        ...this.form_data,
        pageNum:this.list_params.pageNum,
        pageSize:this.list_params.pageSize
      }
      if (this.loadingTime) {
        this.form_data = {
          ...this.form_data,
          loadingTimeStart:this.loadingTime[0],
          loadingTimeEnd:this.loadingTime[1]
        }
      }
      customsClearanceCompanyCurrentAccountDetail(this.form_data).then(res=>{
        this.table_data = res.rows
        this.list_total = res.total
      })
    },
    exportsData(){
      customsClearanceCompanyCurrentAccountDetailExport(this.form_data).then(res=>{
        const url= window.URL.createObjectURL(new Blob([res]));
        const link= document.createElement('a');
        link.href = url;
        link.download =`往来账款明细表(清关公司)_${new Date().getTime()}.xlsx`;
        link.click();
      })
    }
  }
}
</script>

<style scoped>

</style>
